<template>
  <div class="maskCenter">
    <div :class="windowShow?'businessDialog middle':'businessDialog-hide'">
      <div class="dialog-header" v-winmove>
        <span>{{titleName}}</span>
        <span class="icon iconfont iconbiaoqianlan-guanbi" @click="close"></span>
      </div>
      <div class="dialog-body">
        <div class="businessInput" style="width: 100%;margin-bottom:8px;">
          <label class="name">目录名称：</label>
          <el-input type="text" v-model="form.name" class="myInput"></el-input>
        </div>
        <div class="businessInput" style="width: 100%;margin-bottom:8px;">
          <label class="name" style="width: 60px;text-align: left;">目录编号：</label>
          <el-input type="text" v-model="form.code" class="myInput"></el-input>
        </div>
        <div class="businessInput" style="width: 100%;margin-bottom:8px;">
          <label class="name" style="width: 60px;text-align: left;">状态：</label>
          <el-select class="myInput" v-model="form.state">
            <el-option
              v-for="item in stateMap"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="businessInput" style="width: 100%;margin-bottom:8px;">
          <label class="name" style="width: 60px;text-align: left;">备注：</label>
          <el-input type="text" v-model="form.note" class="myInput"></el-input>
        </div>
      </div>
      <div class="dialog-footer right">
        <span class="businessButtonCancel" style="margin-right: 20px;" @click="close">取消</span>
        <span class="businessButtonConfirm" @click="save">保存</span>
      </div>
    </div>
  </div>
</template>


<script>
import winmove from "@/directives/winmove";
import { dataAdd, dataUpdate } from "@/business/api/dataManage";
export default {
  name: "definitionDetail",
  directives: {
    winmove,
  },
  components: {},
  props: {
    titleName: {
      default: "",
    },
    dialogForm: {
      default: "",
    },
  },
  data() {
    return {
      windowShow: true,
      stateMap: [
        { value: 0, label: "不可用" },
        { value: 1, label: "可用" },
      ],
      form: {
        id: "",
        name: "",
        state: 1,
        note: "",
        code: "",
        pid: "",
      },
    };
  },
  methods: {
    load(data) {
      if (data.id) {
        this.form = data;
      } else {
        this.form = {
          id: "",
          pid: data.parentId,
          name: "",
          state: 1,
          note: "",
          code: "",
        };
      }
    },
    save() {
      if (!this.form.name) {
        this.message("请填写目录名称！", 3);
        return false;
      }
      if (!this.form.code) {
        this.message("请填写目录编号！", 3);
        return false;
      }
      if (this.form.id) {
        dataUpdate(this.form).then((res) => {
          if (res.success) {
            this.$emit("hide");
            this.$emit("refreshNode");
          } else {
            this.message(res.msg, 3);
            this.$emit("refreshNode");
          }
        });
      } else {
        dataAdd(this.form).then((res) => {
          if (res.success) {
            this.$emit("hide");
            this.$emit("refreshNode");
          } else {
            this.message(res.msg, 3);
            this.$emit("refreshNode");
          }
        });
      }
    },
    close() {
      this.windowShow = false;
      setTimeout(() => {
        this.$emit("hide");
        this.$emit("query");
      }, 400);
    },
  },
  created: function () {},
  mounted: function () {
    this.load(this.dialogForm);
  },
};
</script>

<style scoped>
.middle {
  height: 290px;
}
.myInput {
  flex: 1;
  color: var(--business-input-text-color);
  background: var(--business-input-bgc);
  box-shadow: -1px 1px 0px 0px var(--business-input-boxshadow),
    1px -1px 0px 0px var(--business-input-boxshadow);
  border: none;
  border-radius: 0;
  font-size: 12px;
}
</style>
<style>
</style>
